<template>
  <div class="table-head">
    <a-card :bordered="false" :header-style="{ padding: '0 12px' }">
      <template #title> {{ t["素材审核"] }} </template>
      <div class="container flex-1">
        <a-form
          :model="reviewQuery"
          :wrapper-col-props="{ span: 4 }"
          :label-col-props="{ span: 2 }"
          label-align="left"
          auto-label-width
        >
          <a-row :gutter="12">
            <a-col :span="6">
              <a-form-item field="name" :label="t['素材名称']">
                <a-input v-model="reviewQuery.name" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item field="type" :label="t['素材类型']">
                <a-select v-model="reviewQuery.type" allow-clear :options="options" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item field="type" :label="t['审核状态']">
                <a-select
                  v-model="reviewQuery.status"
                  allow-clear
                  :options="translateOptions(reviewOptions, '素材审核')"
                  @change="getLibraryList"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6" class="text-right">
              <a-button type="primary" class="ml-4" @click="getLibraryList">{{
                t["查询"]
              }}</a-button>
            </a-col>
          </a-row>
        </a-form>

        <div class="flex gap-3">
          <div class="flex gap-3">
            <a-button @click="getLibraryList">{{ t["刷新"] }}</a-button>
          </div>
          <div class="text-right">
            <a-button type="outline" :disabled="reviewKeys.length === 0" @click="allow()">
              {{ t["批量通过"] }}
            </a-button>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { getOptions } from "@/data/options/options.actions";
import { DICT_ENUM } from "@/enum/dict.enum";

import { allow, getLibraryList } from "../../data/curd";
import { reviewKeys, reviewQuery } from "../../data/data";
import { reviewOptions } from "../../data/options";

const t = translate("公共模块");
const options = ref();

onMounted(async () => {
  options.value = await getOptions(DICT_ENUM.MATERIAL_TYPE, "素材库");
});
</script>

<style lang="scss" scoped>
.table-head {
  ::v-deep(.arco-card-header) {
    border: none;
  }
}
</style>
